<template>
  <div class="common-container flex flex-col h-full">
    <main-title>
      <el-button type="primary" class="btn-add" size="small" @click="addInit">新组织</el-button>
    </main-title>

    <div class="content-wrap flex flex-1 flex-col h0">
      <div class="search-wrap">
        <div class="common-search ym-box">
          <search-form
            v-model:form="_state.queryForm"
            :province-options="provinceOptions"
            :type-options="_state.typeOptions"
            @search="search"
          />
        </div>
        <refresh-btn @refresh="search" />
      </div>

      <div class="table-wrap ym-box">
        <ym-table
          v-loading="state.tableLoading"
          :data="state.tableData"
          :column-data="orgColumnData"
        >
          <template #icon="{ row }">
            <el-avatar
              class="avatar"
              :size="50"
              shape="square"
              cross-origin
              :src="row.logo ? formatUrl(row.logo) : defaultHouse"
            />
          </template>

          <template #name="{ row }">
            <div class="org-name">{{ row.name }}</div>
          </template>
          <template #type="{ row }">
            <div class="org-type">{{ row.typeValue }}</div>
          </template>

          <template #status="{ row }">
            <span>{{ EnableEnum[row.enable] }}</span>
          </template>

          <template #areaAndAddress="{ row }">
            <div class="lh20 org-area">{{ row.areaValue }}</div>
            <div class="lh20">{{ row.addr }}</div>
          </template>
          <template #operator="{ row }">
            <el-button link type="primary" class="font-size-18" @click="editInit(row)">
              <el-icon>
                <Edit />
              </el-icon>
            </el-button>
            <el-button link type="danger" class="font-size-18" @click="del(row)">
              <el-icon>
                <Delete />
              </el-icon>
            </el-button>
          </template>
        </ym-table>
        <pagination
          v-model:currentPage="state.pageObj.pageNum"
          v-model:pageSize="state.pageObj.pageSize"
          :total="state.pageObj.total"
          @pagination="pageChange"
        />
      </div>
    </div>

    <drawer
      v-model:visible="state.dialogVisible"
      :size="640"
      :title="state.dialogTitle"
      :save-loading="state.saveLoading"
      @cancel="handleClose"
      @confirm="confirm"
      @close="closeDrawer"
    >
      <add-or-edit-form
        ref="formWrapper"
        :is-add="state.isAdd"
        :dict-id-maps="dictIdMaps"
        :dict-data="dictStore.dictData"
        :province-options="provinceOptions"
        :type-options="_state.typeOptions"
        :level-options="_state.levelOptions"
      />
    </drawer>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'

import AddOrEditForm from './components/AddOrEditForm.vue'
import SearchForm from './components/SearchForm.vue'
import RefreshBtn from '@/components/CommonSearch/RefreshBtn/index.vue'

import defaultHouse from '@/assets/default-house.png'

import { codeMaps, getByDictCodeList } from '@/api/backend/dict'
import OrgApi from '@/api/backend/organization'
import { useDict } from '@/api/uses'

import { useDictStore } from '@/store/dict'

import { formatUrl } from '@/utils/common'
import { orgColumnData } from '&/utils/columnData'
import { useCity } from '&/utils/useCity'

import { EnableEnum } from '@/configs/codeMaps'
import { commonHandle } from '@/views/mixins/common'
import { Drawer, MainTitle, Pagination, YmTable } from '&/mixins/useComponent'
import IBaseObj from '#/index'

const { state, handleAdd, handleEdit, handleClose, handleSearch, handleDelete, handleConfirm } =
  commonHandle()
const { provinceOptions, getProvinceOptions } = useCity()

getProvinceOptions()

const _state: IBaseObj = reactive({
  queryForm: {
    province: '',
    city: '',
    county: '',
    cls: '',
    name: '',
  },
  typeOptions: [],

  statusOptions: [],
})

const { dictIdMaps } = useDict()
const { getDictData } = useDictStore()
const dictStore = useDictStore()
console.log(dictStore, dictIdMaps, dictStore.dictData)

getDictData()

const search = () => {
  handleSearch(OrgApi.getOrgByPage, _state.queryForm)
}
search()

const addInit = () => {
  handleAdd('创建组织')
}

const editInit = async (row: IBaseObj) => {
  const ret = await OrgApi.getOrgById(row.oid)
  if (ret) {
    handleEdit('修改组织')
    nextTick(() => {
      Object.keys(formWrapper.value.form).forEach((key) => {
        formWrapper.value.form[key] = ret[key]
      })
      formWrapper.value.form.oid = ret.oid

      formWrapper.value.editInitCityOptions(ret.prov)
      formWrapper.value.editInitCountyOptions(ret.city)
    })
  }
}

const del = (row: IBaseObj) => {
  handleDelete({
    url: OrgApi.delUrl,
    id: row.oid,
    message: '此操作将永久删除该组织，是否继续?',
    success: search,
  })
}

const pageChange = () => {
  search()
}

const formWrapper = ref()
const addOrEditReset = () => {
  formWrapper.value.clear()
  _state.orgForm = {
    logo: '',
    name: '',
    cods: '',
    type: '',
    typeOrg: '',
    province: '',
    city: '',
    county: '',
    address: '',
  }
}

const closeDrawer = () => {
  state.isAdd = true
  addOrEditReset()
}

const confirm = async () => {
  const valid = await formWrapper.value.valid()

  handleConfirm({
    valid,
    addApi: OrgApi.saveOrg,
    updateApi: OrgApi.updateOrg,
    params: { ...formWrapper.value.form },
    cb: search,
  })
}
</script>

<style lang="scss" scoped>
$green: #30b08f;
$lightGreen: #2eb4b5;

.org-area {
  font-weight: 600;
}

.org-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
}

.org-type {
  display: inline-block;
  padding: 0 5px;
  color: white;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
}

.search-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.level-cell {
  display: inline-block;
  height: 20px;
  padding: 0 12px;
  margin-left: 5px;
  font-size: 12px;
  line-height: 20px;
  border: 1px solid $green;
  border-radius: 10px;
}

.lh20 {
  line-height: 20px;
}

.info {
  display: flex;
  align-items: center;

  &-detail {
    padding: 10px 0;
    margin-left: 10px;

    &-name {
      display: flex;
      align-items: center;

      .name {
        margin-right: 10px;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
      }

      .level {
        height: 20px;
        min-width: 34px;
        padding: 0 10px;
        font-size: 12px;
        line-height: 20px;
        color: $lightGreen;
        text-align: center;
        border: 1px solid $lightGreen;
        border-radius: 10px;
      }
    }

    &-oid {
      font-size: 13px;
      font-weight: 400;
      line-height: 20px;
    }
  }
}

.avatar {
  background: transparent;
}

.status-wrap {
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
}
</style>
@/api/backend/organization
